.mantine-datatable-header-cell-sortable {
  cursor: pointer;
  transition: background 0.2s;
  &:hover:not(:has(button:hover)) {
    background: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
  }
}

.mantine-datatable-header-cell-draggable {
  cursor: grab;
  border-radius: rem(6px);
  transition: all 0.2s;
  &:active {
    cursor: grabbing;
  }
  &:hover:not(:has(button:hover)) {
    background: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6));
  }
}

.mantine-datatable-header-cell-draggable-action-icon {
  cursor: inherit;
  margin: rem(-2px) rem(2px) 0;
}

.mantine-datatable-header-cell-drag-over {
  background: light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-6));
}

.mantine-datatable-header-cell-toggleable-icon {
  transition: opacity 0.2s;
  opacity: 0.1;
}

.mantine-datatable-header-cell-toggleable {
  &:hover {
    .mantine-datatable-header-cell-toggleable-icon {
      opacity: 1;
    }
  }
}

.mantine-datatable-header-cell-resizable {
  position: relative;
}

.mantine-datatable-header-resizable-handle {
  position: absolute;
  cursor: col-resize;
  top: 0;
  bottom: 0;
  right: -6px; /* Extend further to the right */
  width: 12px; /* Wider for easier clicking */
  background: transparent;
  z-index: 0; /* Keep below sticky pinned columns */
  opacity: 0;
  transition: opacity 0.2s;

  &::after {
    position: absolute;
    content: '';
    top: 2px;
    bottom: 2px;
    left: 5px; /* Centered in the wider handle */
    width: 2px;
    background: light-dark(var(--mantine-color-gray-4), var(--mantine-color-dark-4));
    border-radius: 1px;
    transition: background-color 0.2s;

    @mixin rtl {
      left: auto;
      right: 5px;
    }
  }

  &:hover {
    opacity: 1;
    &::after {
      background: var(--mantine-primary-color-6);
    }
  }

  &:active {
    opacity: 1 !important;
    &::after {
      background: var(--mantine-primary-color-7);
    }
  }

  @mixin rtl {
    right: auto;
    left: -6px;
  }
}

tr:hover .mantine-datatable-header-resizable-handle {
  opacity: 1;
}

/* Ensure resize handle is always visible and accessible for columns with toggleable buttons */
.mantine-datatable-header-cell-toggleable.mantine-datatable-header-cell-resizable:hover
  .mantine-datatable-header-resizable-handle {
  opacity: 1;
}

/* Enhanced visual feedback during resizing */
.mantine-datatable-header-cell-resizable:has(.mantine-datatable-header-resizable-handle:active) {
  background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-7));
  transition: background 0.1s;
}

.mantine-datatable-header-cell-resizable:has(.mantine-datatable-header-resizable-handle:active) + th {
  background: light-dark(var(--mantine-color-blue-0), var(--mantine-color-dark-7));
  transition: background 0.1s;
}

.mantine-datatable-header-cell-sortable-group {
  gap: 0.25em;
}

.mantine-datatable-header-cell-sortable-text {
  min-width: 0;
  flex-grow: 1;
}

.mantine-datatable-header-cell-sortable-icon {
  transition: transform 0.2s;
}

.mantine-datatable-header-cell-sortable-icon-reversed {
  transform: scaleY(-1);
}

.mantine-datatable-header-cell-sortable-unsorted-icon {
  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
  transition: color 0.2s;
  th:hover & {
    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
  }
}
